<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
        <el-form-item label="路线名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入路线名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="起点" prop="startPoint">
          <el-input
            v-model="queryParams.startPoint"
            placeholder="请输入起点"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="终点" prop="endPoint">
          <el-input
            v-model="queryParams.endPoint"
            placeholder="请输入终点"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 200px">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作栏 -->
    <el-card class="operate-card" shadow="never">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="Plus" @click="handleAdd">新增路线</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="info" plain icon="MapLocation" @click="handleOptimize">路线优化</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 路线列表 -->
    <el-card shadow="never">
      <el-table v-loading="loading" :data="routeList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="路线名称" align="center" prop="name" width="150" />
        <el-table-column label="起点" align="center" prop="startPoint" width="200" show-overflow-tooltip />
        <el-table-column label="终点" align="center" prop="endPoint" width="200" show-overflow-tooltip />
        <el-table-column label="距离" align="center" prop="distance" width="100">
          <template #default="scope">
            {{ scope.row.distance }} km
          </template>
        </el-table-column>
        <el-table-column label="预计时间" align="center" prop="estimatedTime" width="120">
          <template #default="scope">
            {{ scope.row.estimatedTime }} 分钟
          </template>
        </el-table-column>
        <el-table-column label="途经点数" align="center" prop="waypointCount" width="100" />
        <el-table-column label="使用次数" align="center" prop="usageCount" width="100" />
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">详情</el-button>
            <el-button link type="primary" icon="MapLocation" @click="handleViewMap(scope.row)">地图</el-button>
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 地图查看对话框 -->
    <el-dialog v-model="mapDialogVisible" title="路线地图" width="80%" center>
      <div class="map-container">
        <div id="routeMap" style="width: 100%; height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
          <span style="color: #999;">地图组件待集成</span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="mapDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 页面标题
defineOptions({ name: 'RideRoute' })

// 响应式数据
const loading = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const routeList = ref([])
const mapDialogVisible = ref(false)

// 查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  startPoint: '',
  endPoint: '',
  status: ''
})

// 查询路线列表
const getList = async () => {
  loading.value = true
  try {
    // 模拟数据
    const mockData = {
      list: [
        {
          id: 1,
          name: '机场快线',
          startPoint: '北京首都国际机场T3航站楼',
          endPoint: '北京市中心商务区',
          distance: 35.2,
          estimatedTime: 45,
          waypointCount: 3,
          usageCount: 156,
          status: 1,
          createTime: '2024-01-05 10:30:00'
        },
        {
          id: 2,
          name: '市区环线',
          startPoint: '天安门广场',
          endPoint: '王府井大街',
          distance: 12.8,
          estimatedTime: 25,
          waypointCount: 5,
          usageCount: 89,
          status: 1,
          createTime: '2024-01-03 14:20:00'
        },
        {
          id: 3,
          name: '郊区专线',
          startPoint: '北京西站',
          endPoint: '昌平区回龙观',
          distance: 28.5,
          estimatedTime: 55,
          waypointCount: 2,
          usageCount: 34,
          status: 0,
          createTime: '2024-01-01 09:15:00'
        }
      ],
      total: 3
    }
    routeList.value = mockData.list
    total.value = mockData.total
  } catch (error) {
    ElMessage.error('获取路线列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置搜索
const resetQuery = () => {
  queryParams.name = ''
  queryParams.startPoint = ''
  queryParams.endPoint = ''
  queryParams.status = ''
  handleQuery()
}

// 多选框选中数据
const handleSelectionChange = (selection: any[]) => {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

// 新增路线
const handleAdd = () => {
  ElMessage.info('新增路线功能待实现')
}

// 修改路线
const handleUpdate = (row?: any) => {
  ElMessage.info('修改路线功能待实现')
}

// 查看详情
const handleDetail = (row: any) => {
  ElMessage.info('查看路线详情功能待实现')
}

// 查看地图
const handleViewMap = (row: any) => {
  mapDialogVisible.value = true
  // 这里可以集成地图组件显示路线
}

// 路线优化
const handleOptimize = () => {
  ElMessage.info('路线优化功能待实现')
}

// 删除路线
const handleDelete = (row?: any) => {
  const routeIds = row?.id ? [row.id] : ids.value
  ElMessageBox.confirm('是否确认删除选中的路线？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    getList()
  })
}

// 导出路线
const handleExport = () => {
  ElMessage.info('导出功能待实现')
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style scoped>
.search-card {
  margin-bottom: 10px;
}

.operate-card {
  margin-bottom: 10px;
}

.mb8 {
  margin-bottom: 8px;
}

.map-container {
  padding: 20px;
}
</style>